<template>
	<view class="container">
		<view class="info-box">
			<image class="info-bg" src="../../static/images/userCenter.jpg"></image>
			<view class="info">
				<view class="avatar-box">
					<image :src="userInfo.userAvatar"></image>
				</view>
				<view class="user-name">{{userInfo.userPhoneShow}}</view>
			</view>
		</view>
		<view class="list-box">
			<view class="list-item" @tap="goMyExtension">
				<view class="item-left">
					<image src="../../static/images/extension.png"></image>
				</view>
				<view class="item-right">
					<view class="item-label-box">
						<view class="item-lable">我的推广</view>
						<view class="item-arrow">
							<image src="../../static/images/arrow.png"></image>
						</view>
					</view>
					<view class="item-line"></view>
				</view>
			</view>
			<view class="list-item" @tap="goMyBank">
				<view class="item-left">
					<image src="../../static/images/bankCard.png"></image>
				</view>
				<view class="item-right">
					<view class="item-label-box">
						<view class="item-lable">我的银行卡</view>
						<view class="item-arrow">
							<image src="../../static/images/arrow.png"></image>
						</view>
					</view>
					<view class="item-line"></view>
				</view>
			</view>
			<view class="list-item" @tap="goQrcode">
				<view class="item-left">
					<image src="../../static/images/qrcode.png"></image>
				</view>
				<view class="item-right">
					<view class="item-label-box">
						<view class="item-lable">我的二维码</view>
						<view class="item-arrow">
							<image src="../../static/images/arrow.png"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<bottom-nav item-index="2"></bottom-nav>
	</view>
</template>

<script>
	import bottomNav from '../../components/expert_bottom_nav.vue'

	export default {
		components: {
			bottomNav
		},
		
		data() {
			return {
				userInfo: {}
			}
		},
		
		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo')
		},

		methods: {
			
			goQrcode() {
				uni.navigateTo({
					url: '/pages/qrcode_my/qrcode_my'
				})
			},
			
			goMyBank() {
				uni.navigateTo({
					url: '/pages/bank_card_my/bank_card_my'
				})
			},
			
			goMyExtension() {
				uni.navigateTo({
					url: '/pages/my_extension/my_extension'
				})
			}
			
		}
	}
</script>

<style>
	page {
		background-color: #eeeeee;
	}

	.container {
		width: 750rpx;
		height: auto;
	}

	.info-box {
		height: 340rpx;
	}

	.info-bg {
		position: absolute;
		left: 0;
		top: 0;
		z-index: -1;
		width: 750rpx;
		height: 340rpx;
	}

	.info {
		width: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #ffffff;
		z-index: 3;
	}

	.avatar-box {
		width: 120rpx;
		height: 120rpx;
		margin-top: 80rpx;
	}

	.avatar-box image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
	}

	.user-name {
		font-size: 32rpx;
		margin-top: 20rpx;
	}

	.list-box {
		width: 750rpx;
		height: auto;
		background-color: #ffffff;
	}

	.list-item {
		display: flex;
		flex-direction: row;
		font-size: 30rpx;
		color: #333333;
	}

	.item-left {
		width: 80rpx;
		height: 100rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.item-left image {
		width: 30rpx;
		height: 30rpx;
	}

	.item-label-box {
		width: 640rpx;
		height: 60rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-top: 18rpx;
	}

	.item-arrow image {
		width: 24rpx;
		height: 24rpx;
	}

	.item-line {
		width: 640rpx;
		height: 1rpx;
		background-color: #f5f5f5;
		margin-top: 20rpx;
	}
</style>
